<!--
* @author wn
* @date 2022/09/02 11:46:47
* @description: 个人中心  主页 入口 页面
* 收藏 API 没有数据  --  使用  足迹 API代替
!-->
<template>
	<div class="member-home">
		<!-- 概览 -->
		<home-overview />
		<!-- 收藏 -->
		<home-panel title="我的收藏">
			<good-item v-for="good in findList" :key="good.id" :good="good" />
		</home-panel>
		<!-- 足迹 -->
		<home-panel title="我的足迹">
			<good-item v-for="good in browse" :key="good.id" :good="good.spu" />
		</home-panel>
		<!-- 猜你 -->
		<goods-relevant>猜你喜欢</goods-relevant>
	</div>
</template>
<script>
import HomeOverview from './components/HomeOverview'
import HomePanel from './components/HomePanel'
import GoodsRelevant from '@/views/goods/components/GoodsRelevant'
import GoodItem from '@/views/category/components/GoodItem'
import { ref } from 'vue'
import { findCollect, browseHistory } from '@/network/member'
export default {
	name: 'index',
	components: { HomeOverview, HomePanel, GoodsRelevant, GoodItem },
	setup() {
		// 获取 收藏--page = 1, pageSize = 10, collectType = 1
		// 此处采用 mock 数据   拦截 请求方式 必须 小写  main中 配置好 自动拦截
		const findList = ref(null)
		findCollect(1, 4).then(({ result }) => {
			findList.value = result.items
		})

		// 获取 足迹--page = 1, pageSize = 10
		const browse = ref(null)
		browseHistory(1, 4).then(({ result }) => {
			browse.value = result.items
		})
		return { findList, browse }
	},
}
</script>
<style scoped lang="less">
// 轮播图左右箭头 需要向外 移动 距离
:deep(.xtx-carousel) {
	.carousel-btn.prev {
		left: 5px;
	}
	.carousel-btn.next {
		right: 5px;
	}
}
</style>
